<template>
	<div class="bg-gray-50 min-h-screen font-sans p-4">
		<!-- 顶部导航栏 -->
		<nav class="mb-6">
			<div class="flex justify-center space-x-4">
				<!-- 我的执裁项目及赛程 -->
				<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer w-60"
					:class="{ 'ring-2 ring-blue-500': activeNav === 'schedule' }" @click="switchNav('schedule')">
					<div class="h-20 flex items-center justify-center px-4">
						<div class="flex items-center space-x-3">
							<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
								<iconify-icon icon="mdi:calendar-clock" class="text-blue-600 text-xl"></iconify-icon>
							</div>
							<span class="text-gray-800 font-semibold">我的执裁项目及赛程</span>
						</div>
					</div>
				</div>

				<!-- 成绩录入 -->
				<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer w-60"
					:class="{ 'ring-2 ring-blue-500': activeNav === 'scoreEntry' }" @click="switchNav('scoreEntry')">
					<div class="h-20 flex items-center justify-center px-4">
						<div class="flex items-center space-x-3">
							<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
								<iconify-icon icon="mdi:clipboard-edit" class="text-green-600 text-xl"></iconify-icon>
							</div>
							<span class="text-gray-800 font-semibold">成绩录入（预选赛/半决赛/决赛）</span>
						</div>
					</div>
				</div>

				<!-- 已录入成绩公示 -->
				<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer w-60"
					:class="{ 'ring-2 ring-blue-500': activeNav === 'scoreDisplay' }"
					@click="switchNav('scoreDisplay')">
					<div class="h-20 flex items-center justify-center px-4">
						<div class="flex items-center space-x-3">
							<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
								<iconify-icon icon="mdi:chart-bar" class="text-purple-600 text-xl"></iconify-icon>
							</div>
							<span class="text-gray-800 font-semibold">已录入成绩公示</span>
						</div>
					</div>
				</div>
				
				<!-- 退出登录 -->
				<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer w-60"
					:class="{ 'ring-2 ring-blue-500': activeNav === 'scoreDisplay' }" @click="tuiChu">
					<div class="h-20 flex items-center justify-center px-4">
						<div class="flex items-center space-x-3">
							<span class="text-gray-800 font-semibold">退出登录</span>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<!-- 主内容区域 -->
		<main>
			<!-- 1. 我的执裁项目及赛程 -->
			<section v-show="activeNav === 'schedule'" class="space-y-6">
				<!-- 我的执裁任务列表 -->
				<div class="bg-white rounded-xl shadow-lg p-6">
					<h2 class="text-xl font-bold text-gray-800 mb-4">我的执裁任务列表</h2>

					<div class="overflow-x-auto">
						<table class="w-full min-w-[800px]">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">赛事项目</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">轮次</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">比赛时间</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">比赛地点</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">参赛人数</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">任务状态</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="(task, index) in judgeTasks" :key="index"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-4 py-3 text-gray-800">{{ task.event }}</td>
									<td class="px-4 py-3">
										<span class="px-3 py-1 rounded-full text-xs font-medium"
											:class="getRoundClass(task.round)">
											{{ task.round }}
										</span>
									</td>
									<td class="px-4 py-3 text-gray-600">{{ task.time }}</td>
									<td class="px-4 py-3 text-gray-600">{{ task.location }}</td>
									<td class="px-4 py-3 text-gray-600">{{ task.participants }}</td>
									<td class="px-4 py-3">
										<span class="px-3 py-1 rounded-full text-xs font-medium"
											:class="getStatusClass(task.status)">
											{{ task.status }}
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- 本周赛程日历 -->
				<div class="bg-white rounded-xl shadow-lg p-6">
					<h2 class="text-xl font-bold text-gray-800 mb-4">本周赛程日历</h2>

					<div class="grid grid-cols-7 gap-2 text-center">
						<!-- 星期 -->
						<div v-for="day in weekDays" :key="day" class="py-2 font-medium text-gray-700">
							{{ day }}
						</div>

						<!-- 日期 -->
						<div v-for="(date, index) in weekDates" :key="index"
							class="py-3 border rounded-lg transition-colors cursor-pointer" :class="getDateClass(date)">
							<div class="text-lg font-semibold">{{ date.day }}</div>
							<div class="text-xs mt-1 text-gray-600 h-8 overflow-hidden">
								{{ date.events }}
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- 2. 成绩录入 -->
			<section v-show="activeNav === 'scoreEntry'" class="space-y-6">
				<!-- 轮次选择 -->
				<div class="bg-white rounded-xl shadow-lg p-6">
					<div class="flex space-x-4 mb-6">
						<button v-for="round in scoreRounds" :key="round"
							class="px-6 py-2 rounded-lg font-medium transition-colors"
							:class="activeRound === round ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
							@click="activeRound = round">
							{{ round }}
						</button>
					</div>

					<!-- 成绩录入表单 -->
					<div class="bg-blue-50 rounded-lg p-6">
						<h3 class="text-lg font-bold text-gray-800 mb-4">{{ activeEvent }} {{ activeRound }}成绩录入</h3>

						<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-2">选择参赛者</label>
								<select
									class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
									<option>请选择参赛者</option>
									<option v-for="player in participants" :key="player.id">{{ player.name }}</option>
								</select>
							</div>

							<div>
								<label class="block text-sm font-medium text-gray-700 mb-2">比赛成绩（秒）</label>
								<input type="text" placeholder="如：10.45"
									class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
							</div>

							<div>
								<button
									class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
									提交{{ activeRound }}成绩
								</button>
							</div>
						</div>
					</div>
				</div>

				<!-- 已录入成绩表格 -->
				<div class="bg-white rounded-xl shadow-lg p-6">
					<h3 class="text-lg font-bold text-gray-800 mb-4">{{ activeRound }}已录入成绩</h3>

					<div class="overflow-x-auto">
						<table class="w-full min-w-[600px]">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">参赛者</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">编号</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">成绩（秒）</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">录入时间</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="(score, index) in enteredScores" :key="index"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-4 py-3 text-gray-800">{{ score.player }}</td>
									<td class="px-4 py-3 text-gray-600">{{ score.number }}</td>
									<td class="px-4 py-3 font-medium text-gray-800">{{ score.result }}</td>
									<td class="px-4 py-3 text-gray-600">{{ score.entryTime }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</section>

			<!-- 3. 已录入成绩公示 -->
			<section v-show="activeNav === 'scoreDisplay'" class="space-y-6">
				<div class="bg-white rounded-xl shadow-lg p-6">
					<h2 class="text-xl font-bold text-gray-800 mb-4">已录入成绩公示</h2>

					<!-- 赛事筛选 -->
					<div class="flex space-x-4 mb-6">
						<select
							class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
							<option>所有赛事</option>
							<option>男子100米</option>
							<option>女子跳高</option>
							<option>男子4×100米接力</option>
							<option>女子标枪</option>
						</select>

						<select
							class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
							<option>所有轮次</option>
							<option>预选赛</option>
							<option>半决赛</option>
							<option>决赛</option>
						</select>
					</div>

					<!-- 成绩公示表格 -->
					<div class="overflow-x-auto">
						<table class="w-full min-w-[800px]">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">赛事项目</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">轮次</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">参赛者</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">成绩</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">排名</th>
									<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">录入时间</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="(result, index) in publishedScores" :key="index"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-4 py-3 text-gray-800">{{ result.event }}</td>
									<td class="px-4 py-3">
										<span class="px-3 py-1 rounded-full text-xs font-medium"
											:class="getRoundClass(result.round)">
											{{ result.round }}
										</span>
									</td>
									<td class="px-4 py-3 text-gray-800">{{ result.player }}</td>
									<td class="px-4 py-3 font-medium text-gray-800">{{ result.result }}</td>
									<td class="px-4 py-3">
										<span
											class="px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
											{{ result.rank }}
										</span>
									</td>
									<td class="px-4 py-3 text-gray-600">{{ result.publishTime }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</section>
		</main>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // useRouter从vue-router导入（路由用）
	const router = useRouter();

	//退出登录
	const tuiChu = () => {
		router.push({
			name: 'total'
		});
	}

	// 响应式数据
	const activeNav = ref('schedule') // 默认显示我的执裁项目及赛程
	const activeRound = ref('预选赛')
	const activeEvent = ref('男子100米')

	// 导航切换
	const switchNav = (nav) => {
		activeNav.value = nav
	}

	// 执裁任务数据
	const judgeTasks = ref([{
			event: '男子100米',
			round: '预选赛',
			time: '2025-09-16 09:00',
			location: '主体育场A区',
			participants: '8人',
			status: '待执裁'
		},
		{
			event: '女子跳高',
			round: '半决赛',
			time: '2025-09-16 14:30',
			location: '田径场F区',
			participants: '12人',
			status: '待执裁'
		},
		{
			event: '男子4×100米接力',
			round: '决赛',
			time: '2025-09-17 10:00',
			location: '主体育场A区',
			participants: '6组（24人）',
			status: '待执裁'
		},
		{
			event: '女子标枪',
			round: '预选赛',
			time: '2025-09-15 11:00',
			location: '田径场C区',
			participants: '10人',
			status: '已完成'
		}
	])

	// 本周赛程数据
	const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	const weekDates = [{
			day: '15',
			events: '女子标枪（完成）',
			isToday: false,
			hasEvent: true
		},
		{
			day: '16',
			events: '男子100米+女子跳高',
			isToday: true,
			hasEvent: true
		},
		{
			day: '17',
			events: '男子4×100米接力',
			isToday: false,
			hasEvent: true
		},
		{
			day: '18',
			events: '',
			isToday: false,
			hasEvent: false
		},
		{
			day: '19',
			events: '',
			isToday: false,
			hasEvent: false
		},
		{
			day: '20',
			events: '',
			isToday: false,
			hasEvent: false
		},
		{
			day: '21',
			events: '',
			isToday: false,
			hasEvent: false
		}
	]

	// 成绩录入数据
	const scoreRounds = ['预选赛', '半决赛', '决赛']
	const participants = [{
			id: 1,
			name: '李明'
		},
		{
			id: 2,
			name: '王芳'
		},
		{
			id: 3,
			name: '张伟'
		},
		{
			id: 4,
			name: '赵娜'
		}
	]

	const enteredScores = [{
			player: '李明',
			number: 'A001',
			result: '10.45',
			entryTime: '2025-09-16 09:30'
		},
		{
			player: '王芳',
			number: 'B002',
			result: '10.52',
			entryTime: '2025-09-16 09:35'
		}
	]

	// 成绩公示数据
	const publishedScores = [{
			event: '男子100米',
			round: '预选赛',
			player: '李明',
			result: '10.45秒',
			rank: '第1名',
			publishTime: '2025-09-16 10:00'
		},
		{
			event: '男子100米',
			round: '预选赛',
			player: '王芳',
			result: '10.52秒',
			rank: '第2名',
			publishTime: '2025-09-16 10:00'
		},
		{
			event: '女子跳高',
			round: '半决赛',
			player: '张伟',
			result: '1.62米',
			rank: '第1名',
			publishTime: '2025-09-16 15:00'
		}
	]

	// 样式类方法
	const getRoundClass = (round) => {
		switch (round) {
			case '预选赛':
				return 'bg-orange-100 text-orange-800'
			case '半决赛':
				return 'bg-purple-100 text-purple-800'
			case '决赛':
				return 'bg-cyan-100 text-cyan-800'
			default:
				return 'bg-gray-100 text-gray-800'
		}
	}

	const getStatusClass = (status) => {
		return status === '已完成' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
	}

	const getDateClass = (date) => {
		if (date.isToday) return 'bg-blue-50 border-blue-200'
		if (date.hasEvent) return 'bg-gray-50 border-gray-200'
		return 'border-gray-100'
	}
</script>

<style scoped>
	/* 基础样式 */
	.bg-gray-50 {
		background-color: #f9fafb;
	}

	.bg-white {
		background-color: white;
	}

	.rounded-xl {
		border-radius: 12px;
	}

	.shadow-lg {
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.hover\:shadow-xl:hover {
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.transition-all {
		transition: all 0.3s ease;
	}

	.transition-colors {
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.grid-cols-7 {
			grid-template-columns: repeat(7, minmax(0, 1fr));
		}

		.min-w-\[800px\] {
			min-width: 800px;
		}

		.min-w-\[600px\] {
			min-width: 600px;
		}
	}

	.overflow-x-auto {
		overflow-x: auto;
	}

	/* 表格样式 */
	table {
		border-collapse: collapse;
		width: 100%;
	}

	th,
	td {
		padding: 12px 16px;
		text-align: left;
		border-bottom: 1px solid #e5e7eb;
	}

	thead th {
		background-color: #f9fafb;
		font-weight: 600;
		color: #374151;
	}

	/* 按钮和输入框样式 */
	button:focus,
	select:focus,
	input:focus {
		outline: none;
		ring: 2px;
		ring-color: #3b82f6;
	}

	.bg-blue-600 {
		background-color: #2563eb;
	}

	.hover\:bg-blue-700:hover {
		background-color: #1d4ed8;
	}
</style>